<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--头-->
<div th:replace="~{admin/examples/commons::head}"></div>

<body >
<div class="wrapper ">
    <!--导航栏-->
    <div th:replace="~{admin/examples/commons::sidebar(active='wallpaper')}"></div>

    <div class="main-panel">
        <!-- Navbar -->
        <div th:replace="~{admin/examples/commons::navbar}"></div>
        <!-- End Navbar -->
        <div class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="card" style="">
                        <div class="card-header">
                            <h4 class="card-title">壁纸管理</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <form class="xiugai" name="xiugai" action="/wallpaper/updatewallpaper" method="get" style="display: none" th:each="wall:*{wallpaperpage.getList()}">
                                    <input class="wallpaperId" type="text" name="wallpaperId" th:value="*{wall.wallpaperId}">
                                    <input class="wallpaperName" type="text" name="wallpaperName" th:value="*{wall.wallpaperName}">
                                    <input class="wallpaperUrl" type="text" name="wallpaperUrl" th:value="*{wall.wallpaperUrl}">
                                </form>
                                <table class="table">
                                    <thead class=" text-primary">
                                    <th>
                                        ID
                                    </th>
                                    <th>
                                        名字
                                    </th>
                                    <th>
                                        图片URL
                                    </th>
                                    <th>
                                        微缩图
                                    </th>
                                    <th class="text-right">
                                        操作
                                    </th>
                                    </thead>

                                    <tbody>

                                        <tr th:each="wall:*{wallpaperpage.getList()}">
                                                <td th:text="*{wall.wallpaperId}">
                                                    ID
                                                </td>
                                                <td >
                                                    <input class="wallpaperName" name="wallpaperName" th:value="*{wall.wallpaperName}">
                                                </td>
                                                <td>
                                                    <!--图片URL-->
                                                    <input class="wallpaperUrl" name="wallpaperUrl" th:value="*{wall.wallpaperUrl}">
                                                </td>
                                                <td>
                                                    <!--微缩图-->
                                                    <img th:src="*{wall.wallpaperThumb}" style="width: 30%">
                                                </td>
                                                <td class="text-right">
                                                    <button type="button" class="btn btn-info tjbj">提交编辑</button>
        <!--                                                    th:onclick = "upWallpaper([[${wall.wallpaperId}]],[[${wallpaperpage.getPageNum()}]])"-->

                                                </td>
                                                <td class="text-right">
                                                    <button type="button" class="btn btn-danger"
                                                            th:onclick = "delWallpaper([[${wall.wallpaperId}]],[[${wallpaperpage.getPageNum()}]])">删除</button>
                                                </td>
                                        </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <nav aria-label="Page navigation example">
                            <span  class="justify-content-center"></span>
                            <ul class="pagination justify-content-center" >
                                <li class="page-item">
                                    <a class="page-link" aria-label="Previous"
                                       th:text="'现在是第  '+${wallpaperpage.getPageNum()}+'  页！'">
                                        当前页码
                                    </a>
                                </li>
                            </ul>
                            <ul class="pagination justify-content-center" >
                                <li class="page-item">
                                    <a class="page-link" aria-label="Previous"
                                       th:if = "${wallpaperpage.isHasPreviousPage()}"
                                       th:href="@{'/wallpaper/wallpaperpage?setPageNum='+${wallpaperpage.getPrePage()}}">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <!--                      th:text="*{page}"-->
                                <!--                      <div th:each="page:*{userpage.getNavigatepageNums()}">-->
                                <ul class="pagination justify-content-center"
                                    th:each="page:*{wallpaperpage.getNavigatepageNums()}">
                                    <li class="page-item">
                                        <a class="page-link"
                                           th:href="@{'/wallpaper/wallpaperpage?setPageNum='+${page}}" th:text="*{page}">1</a>
                                    </li>
                                </ul>
                                <li class="page-item">
                                    <a class="page-link" aria-label="Next"
                                       th:if = "${wallpaperpage.isHasNextPage()}"
                                       th:href="@{'/wallpaper/wallpaperpage?setPageNum='+${wallpaperpage.getNextPage()}}">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <!--底部-->
        <div th:replace="~{admin/examples/commons::footer}"></div>
    </div>

</div>
<!--   Core JS Files   -->
<div th:replace="~{admin/examples/commons::script}"></div>
</body>

<script>
    function delWallpaper(id,pagenum){
        if (confirm("确定要删除???")) {
            window.location.href = "/wallpaper/deletewallpaper?id="+id+"&pagenum="+pagenum;
            // window.location.reload();
        } else {

        }
    }
    // input数据接收,接收完放下面提交
    // function upWallpaper(id,pagenum){
    //     if (confirm("确定提交此次编辑???")) {
    //         var name = "125";
    //         var url
    //         alert(id+"+"+name+"+"+url+pagenum)
    //         window.location.href = "/wallpaper/updatewallpaper?id="+id+"&name"+name+"&url"+url+"&pagenum"+pagenum;
    //         // window.location.reload();
    //     } else {
    //
    //     }
    // }
    $('.tjbj').click(function (){
        if(confirm("确定要提交此编辑???")){
            var index = $(this).parent().parent().index();
            console.log(index);
            $('.xiugai').eq(index).children('.wallpaperName').eq(0).attr("value",$(this).siblings('.wallpaperName').val());
            $('.xiugai').eq(index).children('.wallpaperUrl').eq(0).attr("value",$(this).siblings('.wallpaperUrl').val());
            const params = $('.xiugai').eq(index).serializeArray();
            const j = {};
            for (const item in params) {
                j[params[item].name] = params[item].value;
            }
            // $('.xiugai').eq(index).ajaxSubmit(function (data) {console.log("success")});
            $.ajax({
                url:'/wallpaper/updatawallpaper',
                data:JSON.stringify(j),
                type:'post',
                dataType:'json',
                headers:{
                    Accept:"application/json",
                    "Content-Type":"application/json"
                },
                processData:false,
                cache:false
            }).done(function (data) {
                console.log("success");
                window.location.reload();
            });
        }else {

        }

    })
    $('.wallpaperName').change(function (){
        var index = $(this).parent().parent().index();
        $('.xiugai').eq(index).children('.wallpaperName').eq(0).attr("value",$(this).val());
    })
    $('.wallpaperUrl').change(function (){
        var index = $(this).parent().parent().index();
        $('.xiugai').eq(index).children('.wallpaperUrl').eq(0).attr("value",$(this).val());
    })
</script>
</html>